Was ist JavaScript?

JavaScript ist eine Skript- oder Programmiersprache, die es Ihnen ermöglicht, komplexe Funktionen auf Webseiten zu implementieren – jedes Mal, wenn eine Webseite mehr tut, als nur dort zu sitzen und statische Informationen für Sie anzuzeigen – z. B. rechtzeitige Aktualisierungen des Inhalts, interaktive Karten, animierte 2D/3D-Grafiken, Video-Jukeboxen mit Bildlauf usw. – können Sie darauf wetten, dass JavaScript wahrscheinlich beteiligt ist. Es ist die dritte Schicht des Schichtkuchens der standardmäßigen Webtechnologien, von denen zwei (HTML und CSS) wir in anderen Teilen des Lernbereichs ausführlicher behandelt haben.

• HTML ist die Auszeichnungssprache, die wir verwenden, um unsere Webinhalte zu strukturieren und ihnen Bedeutung zu verleihen, indem wir beispielsweise Absätze, Überschriften und Datentabellen definieren oder Bilder und Videos in die Seite einbetten.
• CSS ist eine Sprache von Stilregeln, die wir verwenden, um unserem HTML-Inhalt Styling zu verleihen, z.B. Hintergrundfarben und Schriftarten festzulegen und unseren Inhalt in mehreren Spalten anzuordnen.
• JavaScript ist eine Skriptsprache, die es Ihnen ermöglicht, dynamisch aktualisierende Inhalte zu erstellen, Multimedia zu steuern, Bilder zu animieren und so ziemlich alles andere. (Okay, nicht alles, aber es ist erstaunlich, was Sie mit ein paar Zeilen JavaScript-Code erreichen können.)

Die drei Schichten bauen schön übereinander auf. Nehmen wir einen Button als Beispiel. Wir können ihn mit HTML auszeichnen, um ihm Struktur und Zweck zu geben:

<button type="button">Player 1: Chris</button>

Dann können wir einige CSS hinzufügen, um ihn schön aussehen zu lassen:

button {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 2px solid rgb(200 200 0 / 60%);
  background-color: rgb(0 217 217 / 60%);
  color: rgb(100 0 0 / 100%);
  box-shadow: 1px 1px 2px rgb(0 0 200 / 40%);
  border-radius: 10px;
  padding: 3px 10px;
  cursor: pointer;
}

Und schließlich können wir JavaScript hinzufügen, um dynamisches Verhalten zu implementieren:

function updateName() {
  const name = prompt("Enter a new name");
  button.textContent = `Player 1: ${name}`;
}

const button = document.querySelector("button");

button.addEventListener("click", updateName);

Sie können auf "Play" klicken, um das Beispiel im MDN Playground zu sehen und zu bearbeiten. Versuchen Sie, auf das Textlabel zu klicken, um zu sehen, was passiert.

JavaScript kann noch viel mehr als das – lassen Sie uns erkunden, was im Detail.

Die grundlegende clientseitige JavaScript-Sprache besteht aus einigen allgemeinen Programmierfunktionen, die es Ihnen ermöglichen, Dinge wie:

• Nützliche Werte in Variablen zu speichern. Im obigen Beispiel beispielsweise fragen wir nach einem neuen Namen, der eingegeben werden soll, und speichern diesen Namen in einer Variablen namens name.
• Operationen an Textstücken (in der Programmierung als "Strings" bekannt) durchzuführen. Im obigen Beispiel nehmen wir den String "Player 1: " und fügen ihn der Variablen name hinzu, um das vollständige Textlabel zu erstellen, z.B. "Player 1: Chris".
• Code auszuführen, wenn bestimmte Ereignisse auf einer Webseite auftreten. Wir haben in unserem Beispiel oben ein click-Ereignis verwendet, um zu erkennen, wann das Label angeklickt wird, und dann den Code auszuführen, der das Textlabel aktualisiert.
• Und vieles mehr!

Noch aufregender ist jedoch die Funktionalität, die auf der clientseitigen JavaScript-Sprache aufbaut. Die sogenannten Application Programming Interfaces (APIs) geben Ihnen zusätzliche Superkräfte, die Sie in Ihrem JavaScript-Code verwenden können.

APIs sind vorgefertigte Sets von Codebausteinen, die es einem Entwickler ermöglichen, Programme zu implementieren, die sonst schwer oder unmöglich umzusetzen wären. Sie tun dasselbe für das Programmieren, was vorgefertigte Möbelbausätze für den Hausbau tun – es ist viel einfacher, vorgefertigte Platten zu verschrauben, um ein Bücherregal zu bauen, als selbst das Design zu erarbeiten, das richtige Holz zu finden, alle Platten auf die richtige Größe und Form zuzuschneiden, die passenden Schrauben zu finden und dann zusammenzubauen, um ein Bücherregal zu bauen.

Sie fallen im Allgemeinen in zwei Kategorien.

Browser-APIs sind in Ihren Webbrowser eingebaut und können Daten aus der umgebenden Computerumgebung bereitstellen oder nützliche komplexe Funktionen ausführen. Zum Beispiel:

• Die DOM (Document Object Model) API ermöglicht es Ihnen, HTML und CSS zu manipulieren, HTML zu erstellen, zu entfernen und zu ändern, dynamisch neue Stile auf Ihre Seite anzuwenden usw. Jedes Mal, wenn ein Popup-Fenster auf einer Seite angezeigt wird oder neuer Inhalt angezeigt wird (wie wir oben in unserem einfachen Demo gesehen haben), ist das das DOM in Aktion.
• Die Geolocation API ruft geografische Informationen ab. Dies ist, wie Google Maps Ihren Standort finden und auf einer Karte anzeigen kann.
• Die Canvas und WebGL APIs ermöglichen es Ihnen, animierte 2D- und 3D-Grafiken zu erstellen. Die Leute machen erstaunliche Dinge mit diesen Webtechnologien – siehe Chrome Experiments und webglsamples.
• Audio- und Video-APIs wie HTMLMediaElement und WebRTC ermöglichen es Ihnen, wirklich interessante Dinge mit Multimedia zu tun, wie Audio und Video direkt auf einer Webseite abzuspielen oder Video von Ihrer Webcam zu erfassen und auf dem Computer eines anderen anzuzeigen (probieren Sie unser einfaches Snapshot-Demo, um die Idee zu verstehen).

Drittanbieter-APIs sind standardmäßig nicht im Browser eingebaut, und Sie müssen deren Code und Informationen im Allgemeinen irgendwo im Web abrufen. Zum Beispiel:

• Die Bluesky API ermöglicht es Ihnen, Dinge wie Ihre neuesten Beiträge auf Ihrer Website anzuzeigen.
• Die Google Maps API und OpenStreetMap API ermöglichen es Ihnen, benutzerdefinierte Karten in Ihre Website einzubetten und andere ähnliche Funktionen zu nutzen.

Es gibt auch noch viel mehr! Lassen Sie sich jedoch noch nicht zu sehr begeistern. Sie werden nicht in der Lage sein, das nächste Facebook, Google Maps oder Instagram zu bauen, nachdem Sie 24 Stunden JavaScript studiert haben – es gibt viele Grundlagen, die zuerst behandelt werden müssen. Und deshalb sind Sie hier – gehen wir weiter!

Hier werden wir tatsächlich einige Codes betrachten und dabei erforschen, was tatsächlich passiert, wenn Sie JavaScript auf Ihrer Seite ausführen.

Lassen Sie uns kurz die Geschichte rekapitulieren, was passiert, wenn Sie eine Webseite in einem Browser laden (zuerst in unserem Artikel über Was ist CSS? angesprochen). Wenn Sie eine Webseite in Ihrem Browser laden, führen Sie Ihren Code (HTML, CSS und JavaScript) in einer Ausführungsumgebung (dem Browser-Tab) aus. Dies ist wie eine Fabrik, die Rohmaterialien (den Code) aufnimmt und ein Produkt (die Webseite) ausgibt.

Eine sehr häufige Verwendung von JavaScript besteht darin, HTML und CSS dynamisch zu ändern, um eine Benutzeroberfläche über die Dokumentobjektmodell-API (wie oben erwähnt) zu aktualisieren.

Jeder Browser-Tab hat seinen eigenen separaten Eimer zum Ausführen von Code (diese Eimer werden in der Fachsprache "Ausführungsumgebungen" genannt) – das bedeutet, dass in den meisten Fällen der Code in jedem Tab vollständig separat ausgeführt wird und der Code in einem Tab den Code in einem anderen Tab – oder auf einer anderen Website – nicht direkt beeinflussen kann. Dies ist eine gute Sicherheitsmaßnahme – wenn dies nicht der Fall wäre, könnten Piraten beginnen, Code zu schreiben, um Informationen von anderen Websites zu stehlen, und andere schlechte Dinge tun.

Wenn der Browser auf einen JavaScript-Block stößt, führt er diesen normalerweise in der Reihenfolge aus, von oben nach unten. Das bedeutet, dass Sie darauf achten müssen, in welcher Reihenfolge Sie Dinge anordnen. Lassen Sie uns zum Beispiel zu dem JavaScript-Block zurückkehren, den wir in unserem ersten Beispiel gesehen haben:

function updateName() {
  const name = prompt("Enter a new name");
  button.textContent = `Player 1: ${name}`;
}

const button = document.querySelector("button");

button.addEventListener("click", updateName);

Hier definieren wir zuerst einen Codeblock namens updateName() (diese Arten von wiederverwendbaren Codeblöcken werden Funktionen genannt), der den Benutzer nach einem neuen Namen fragt und diesen Namen in den Text eines Buttons einfügt. Wir speichern dann eine Referenz zu einem Button mit document.querySelector und fügen ihm mit addEventListener einen Ereignis-Listener hinzu, sodass beim Klicken auf den Button die updateName()-Funktion ausgeführt wird.

Wenn Sie die Reihenfolge der Zeilen const button = ... und button.addEventListener(...) vertauschen würden, würde der Code nicht mehr funktionieren – stattdessen würden Sie einen Fehler in der Browser-Entwicklerkonsole erhalten – Uncaught ReferenceError: Cannot access 'button' before initialization. Dies bedeutet, dass das button-Objekt noch nicht initialisiert wurde, sodass wir keinen Ereignis-Listener daran anhängen können.

Sie könnten die Begriffe interpretiert und kompiliert im Kontext der Programmierung hören. In interpretierten Sprachen wird der Code von oben nach unten ausgeführt und das Ergebnis der Ausführung des Codes wird sofort zurückgegeben. Sie müssen den Code nicht in eine andere Form umwandeln, bevor der Browser ihn ausführt. Der Code wird in seiner benutzerfreundlichen Textform empfangen und direkt von dieser verarbeitet.

Kompilierte Sprachen werden andererseits in eine andere Form umgewandelt (kompiliert), bevor sie von dem Computer ausgeführt werden. Zum Beispiel werden C/C++ in Maschinencode kompiliert, der dann vom Computer ausgeführt wird. Das Programm wird aus einem binären Format ausgeführt, das aus dem ursprünglichen Programmsourcecode generiert wurde.

JavaScript ist eine leichtgewichtige interpretierte Programmiersprache. Der Webbrowser empfängt den JavaScript-Code in seiner ursprünglichen Textform und führt das Skript daraus aus. Aus technischer Sicht verwenden die meisten modernen JavaScript-Interpreter tatsächlich eine Technik namens Just-in-Time-Compiling, um die Leistung zu verbessern; der JavaScript-Sourcecode wird während der Verwendung des Skripts in ein schnelleres binäres Format kompiliert, sodass er so schnell wie möglich ausgeführt werden kann. JavaScript wird jedoch weiterhin als interpretierte Sprache betrachtet, da die Kompilierung zur Laufzeit und nicht im Voraus gehandhabt wird.

Es gibt Vorteile für beide Arten von Sprachen, aber wir werden sie jetzt nicht erörtern.

Sie könnten auch die Begriffe server-seitiger und client-seitiger Code hören, insbesondere im Kontext der Webentwicklung. Client-seitiger Code ist Code, der auf dem Computer des Benutzers ausgeführt wird – wenn eine Webseite angezeigt wird, wird der client-seitige Code der Seite heruntergeladen, dann ausgeführt und vom Browser angezeigt. In diesem Modul sprechen wir ausdrücklich über client-seitiges JavaScript.

Server-seitiger Code hingegen wird auf dem Server ausgeführt und seine Ergebnisse werden heruntergeladen und im Browser angezeigt. Beispiele für beliebte server-seitige Websprachen sind PHP, Python, Ruby, C# und sogar JavaScript! JavaScript kann auch als server-seitige Sprache verwendet werden, zum Beispiel in der beliebten Node.js-Umgebung – Sie können mehr über server-seitiges JavaScript in unserem Thema Dynamische Websites – Server-seitige Programmierung erfahren.

Das Wort dynamisch wird sowohl zur Beschreibung von client-seitigem JavaScript als auch von server-seitigen Sprachen verwendet – es bezieht sich auf die Fähigkeit, die Anzeige einer Webseite/App zu aktualisieren, um in verschiedenen Umständen unterschiedliche Dinge zu zeigen und nach Bedarf neue Inhalte zu generieren. Server-seitiger Code generiert dynamisch neue Inhalte auf dem Server, z.B. indem er Daten aus einer Datenbank abruft, während client-seitiges JavaScript dynamisch neue Inhalte im Browser auf dem Client generiert, z.B. eine neue HTML-Tabelle erstellt, diese mit vom Server angeforderten Daten füllt und dann die Tabelle in einer dem Benutzer angezeigten Webseite darstellt. Die Bedeutung ist in beiden Kontexten etwas unterschiedlich, aber verwandt, und beide Ansätze (server-seitig und client-seitig) arbeiten in der Regel zusammen.

Eine Webseite ohne dynamisch aktualisierende Inhalte wird als statisch bezeichnet – sie zeigt immer denselben Inhalt an.

JavaScript wird Ihrer HTML-Seite auf ähnliche Weise wie CSS hinzugefügt. Während CSS <link>-Elemente verwendet, um externe Stylesheets anzuwenden, und <style>-Elemente, um interne Stylesheets auf HTML anzuwenden, benötigt JavaScript nur einen Freund in der Welt von HTML – das <script>-Element. Lassen Sie uns lernen, wie das funktioniert.

1. Erstellen Sie zunächst eine lokale Kopie unserer Beispieldatei apply-javascript.html. Speichern Sie sie in einem sinnvollen Verzeichnis.

2. Öffnen Sie die Datei in Ihrem Webbrowser und im Texteditor. Sie werden sehen, dass das HTML eine einfache Webseite erstellt, die einen klickbaren Button enthält.

3. Gehen Sie als nächstes zu Ihrem Texteditor und fügen Sie Folgendes am Ende Ihres Body-Bereichs hinzu – direkt vor Ihrem schließenden </body>-Tag:

   html

   <script>
     // JavaScript goes here
   </script>
   

   Beachten Sie, dass der Code in Ihren Webdokumenten im Allgemeinen in der Reihenfolge geladen und ausgeführt wird, in der er auf der Seite erscheint. Indem wir das JavaScript am Ende platzieren, stellen wir sicher, dass alle HTML-Elemente geladen sind. (Siehe auch Strategien zum Laden von Skripten weiter unten.)

4. Nun werden wir etwas JavaScript in unser <script>-Element hinzufügen, um die Seite interessanter zu machen – fügen Sie den folgenden Code direkt unter der Zeile "// JavaScript goes here" hinzu:

   js

   function createParagraph() {
     const para = document.createElement("p");
     para.textContent = "You clicked the button!";
     document.body.appendChild(para);
   }
   
   const buttons = document.querySelectorAll("button");
   
   for (const button of buttons) {
     button.addEventListener("click", createParagraph);
   }
   

5. Speichern Sie Ihre Datei und aktualisieren Sie den Browser – jetzt sollten Sie sehen, dass beim Klicken auf den Button ein neuer Absatz generiert und darunter platziert wird.

Das funktioniert großartig, aber was ist, wenn wir unser JavaScript in eine externe Datei legen möchten? Lassen Sie uns das jetzt erkunden.

1. Erstellen Sie zuerst eine neue Datei im selben Verzeichnis wie Ihre Beispiel-HTML-Datei. Nennen Sie sie script.js – stellen Sie sicher, dass sie die .js-Dateinamenerweiterung hat, da dies als JavaScript erkannt wird.

2. Entfernen Sie Ihr aktuelles <script>-Element am unteren Ende des </body> und fügen Sie das folgende direkt vor dem schließenden </head> hinzu (damit der Browser die Datei früher laden kann, als wenn sie unten ist):

   html

   <script type="module" src="script.js"></script>
   

3. Fügen Sie in script.js das folgende Skript hinzu:

   js

   function createParagraph() {
     const para = document.createElement("p");
     para.textContent = "You clicked the button!";
     document.body.appendChild(para);
   }
   
   const buttons = document.querySelectorAll("button");
   
   for (const button of buttons) {
     button.addEventListener("click", createParagraph);
   }
   

4. Speichern und aktualisieren Sie Ihren Browser. Sie werden feststellen, dass das Klicken auf den Button keine Wirkung hat, und wenn Sie die Konsole Ihres Browsers überprüfen, sehen Sie einen Fehler ähnlich Cross-origin request blocked. Das liegt daran, dass wie viele externe Ressourcen, JavaScript-Module vom desselben Ursprungs wie das HTML geladen werden müssen, und file:// URLs qualifizieren sich nicht. Es gibt zwei Lösungen, um dieses Problem zu beheben:

   • Unsere empfohlene Lösung ist es, einen lokalen Testserver einzurichten. Wenn das Serverprogramm läuft und die apply-javascript-external.html und script.js Dateien auf Port 8000 bereitgestellt werden, öffnen Sie Ihren Browser und gehen zu http://localhost:8000.
   • Wenn Sie keinen lokalen Server ausführen können, können Sie auch <script defer src="script.js"></script> anstelle von <script type="module" src="script.js"></script> verwenden. Siehe Strategien zum Laden von Skripten unten für weitere Informationen. Beachten Sie jedoch, dass Funktionen, die wir in anderen Teilen des Tutorials verwenden, möglicherweise ebenfalls einen lokalen HTTP-Server erfordern.

5. Jetzt funktioniert die Website genauso wie zuvor, aber jetzt haben wir unser JavaScript in einer externen Datei. Dies ist im Allgemeinen eine gute Sache hinsichtlich der Organisation Ihres Codes und der Wiederverwendbarkeit über mehrere HTML-Dateien hinweg. Außerdem ist das HTML leichter lesbar, ohne große Scriptblöcke darin vergraben.

Beachten Sie, dass Sie manchmal auf tatsächliche JavaScript-Stücke stoßen, die sich innerhalb von HTML befinden. Es könnte etwa so aussehen:

function createParagraph() {
  const para = document.createElement("p");
  para.textContent = "You clicked the button!";
  document.body.appendChild(para);
}

<button onclick="createParagraph()">Click me!</button>

Sie können diese Version unseres Demos unten ausprobieren.

Dieses Demo hat genau die gleiche Funktionalität wie in den vorherigen zwei Abschnitten, außer dass das <button> Element einen Inline-onclick-Handler enthält, um die Funktion auszuführen, wenn der Button gedrückt wird.

Bitte tun Sie dies jedoch nicht. Es ist schlechte Praxis, Ihr HTML mit JavaScript zu verschmutzen, und es ist ineffizient – Sie müssten das onclick="createParagraph()"-Attribut für jeden Button angeben, auf den das JavaScript angewendet werden soll.

Anstatt JavaScript in Ihr HTML einzubinden, verwenden Sie ein reines JavaScript-Konstrukt. Die querySelectorAll()-Funktion ermöglicht es Ihnen, alle Buttons auf einer Seite auszuwählen. Sie können dann durch die Buttons schleife, einen Handler für jeden mit addEventListener() zuzuweisen. Der Code dafür ist unten gezeigt:

const buttons = document.querySelectorAll("button");

for (const button of buttons) {
  button.addEventListener("click", createParagraph);
}

Dies mag ein wenig länger sein als das onclick-Attribut, aber es wird für alle Buttons funktionieren – unabhängig davon, wie viele sich auf der Seite befinden oder hinzugefügt oder entfernt werden. Das JavaScript muss nicht geändert werden.

Der gesamte HTML-Code auf einer Seite wird in der Reihenfolge geladen, in der er erscheint. Wenn Sie JavaScript verwenden, um Elemente auf der Seite zu manipulieren (oder genauer gesagt das Dokumentobjektmodell), funktioniert Ihr Code nicht, wenn das JavaScript geladen und analysiert wird, bevor das HTML, das Sie manipulieren möchten.

Es gibt ein paar verschiedene Strategien, um sicherzustellen, dass Ihr JavaScript nur ausgeführt wird, nachdem das HTML analysiert wurde:

• Im obigen internen JavaScript-Beispiel wird das Script-Element am Ende des Body des Dokuments platziert und daher erst nach dem Rest des HTML-Bodys ausgeführt.

• Im obigen externen JavaScript-Beispiel wird das Script-Element im Kopf des Dokuments platziert, bevor der HTML-Body analysiert wird. Da wir jedoch <script type="module"> verwenden, wird der Code als Modul behandelt und der Browser wartet darauf, dass das gesamte HTML verarbeitet wird, bevor JavaScript-Module ausgeführt werden. (Sie könnten externe Skripte auch am Ende des Bodys platzieren. Aber wenn es viel HTML gibt und das Netzwerk langsam ist, kann es viel Zeit in Anspruch nehmen, bevor der Browser überhaupt mit dem Abrufen und Laden des Skripts beginnen kann, daher ist es in der Regel besser, externe Skripte im Kopf zu platzieren.)

• Wenn Sie trotzdem nicht-Modul-Skripte im Dokumentenkopf verwenden wollen, die die gesamte Seite daran hindern können, angezeigt zu werden, und Fehler verursachen könnten, weil sie vor der HTML-Analyse ausgeführt werden:

  • Für externe Skripte sollten Sie das defer (oder, wenn Sie nicht benötigen, dass das HTML bereit ist, das async) Attribut auf das <script>-Element setzen.
  • Für interne Skripte sollten Sie den Code in einem DOMContentLoaded Ereignishandler verpacken.

  Dies geht über den Umfang des Tutorials an diesem Punkt hinaus, aber es sei denn, Sie müssen sehr alte Browser unterstützen, müssen Sie dies nicht tun und können stattdessen einfach <script type="module"> verwenden.

Wie bei HTML und CSS ist es möglich, Kommentare in Ihren JavaScript-Code zu schreiben, die vom Browser ignoriert werden und dazu da sind, Ihren Kollegen Anweisungen zu geben, wie der Code funktioniert (und Ihnen, wenn Sie nach sechs Monaten zu Ihrem Code zurückkehren und sich nicht mehr erinnern können, was Sie getan haben). Kommentare sind sehr nützlich, und Sie sollten sie oft verwenden, insbesondere bei größeren Anwendungen. Es gibt zwei Arten:

• Ein einzeiliger Kommentar wird nach einem Doppel-Forward-Slash (//) geschrieben, z.B.

  js

  // I am a comment
  

• Ein mehrzeiliger Kommentar wird zwischen den Zeichenfolgen /* und */ geschrieben, z.B.

  js

  /*
    I am also
    a comment
  */
  

So könnten wir zum Beispiel das JavaScript unseres letzten Demos mit Kommentaren versehen:

// Function: creates a new paragraph and appends it to the bottom of the HTML body.

function createParagraph() {
  const para = document.createElement("p");
  para.textContent = "You clicked the button!";
  document.body.appendChild(para);
}

/*
  1. Get references to all the buttons on the page in an array format.
  2. Loop through all the buttons and add a click event listener to each one.

  When any button is pressed, the createParagraph() function will be run.
*/

const buttons = document.querySelectorAll("button");

for (const button of buttons) {
  button.addEventListener("click", createParagraph);
}

Da haben Sie es, Ihr erster Schritt in die Welt von JavaScript. Wir haben mit reiner Theorie begonnen, um Sie daran zu gewöhnen, warum Sie JavaScript verwenden würden und welche Art von Dingen Sie damit tun können. Unterwegs haben Sie einige Codebeispiele gesehen und gelernt, wie JavaScript in den Rest des Codes auf Ihrer Website passt, unter anderem.

JavaScript mag jetzt ein wenig entmutigend erscheinen, aber keine Sorge – in diesem Kurs führen wir Sie in einfachen Schritten durch, die im weiteren Verlauf Sinn machen werden. Im nächsten Artikel tauchen wir direkt in das Praktische ein und lassen Sie Ihre eigenen JavaScript-Beispiele erstellen.

• Übersicht: Dynamisches Scripting mit JavaScript
• Weiter